<template>
  <view class="category">
    <saerch></saerch>
    <view class="main">
      <view class="left">
        <view
          @click="changeItem(index)"
          :class="current === index ? 'active' : ''"
          class="item"
          v-for="(item,index) in leftTles"
          :key="item"
          >{{ item }}</view
        >
      </view>
      <view class="rigth">
        <view class="goods-group" v-for="item in goods" :key="item.cat_id">
          <view class="goods-grunp-title">{{ item.cat_name }}</view>
          <view class="goods-group-list">
            <navigator
              class="goods-item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
              :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`"
            >
              <u-image :src="item2.cat_icon" width="120" height="120"></u-image>
              <view class="cat_name">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中菜单的下标
      current: 0,
      //左侧标题数组
      leftTles: [],
      //右侧内容数组
      goods: [],
    };
  },
  onLoad() {
    // 获取商品分类数据
    this.getCategories();
  },
  methods: {
    async getCategories() {
      this.category = await this.$u.http.get("/categories");
      this.leftTles = this.category.map((item) => item.cat_name);
      this.goods = this.category[this.current].children;
    },
    changeItem(index) {
      console.log(123);
      this.current = index;
      this.goods = this.category[this.current].children;
    },
  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  display: flex;
  flex: 1;
  overflow: hidden;
  .left {
    width: 182rpx;
    background: #f3f3f3;
    overflow: auto;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72rpx;
      color: #585858;
    }
    .active {
      color: $theme-color;
      position: relative;
      &:before {
        content: "";
        display: block;
        position: absolute;
        top: 18rpx;
        left: 0;
        border: 2rpx solid $theme-color;
        width: 0;
        height: 36rpx;
        background-color: $theme-color;
      }
    }
  }
  .rigth {
    flex: 1;
    overflow: auto;
    .goods-group {
      .goods-grunp-title {
        font-size: 26rpx;
        height: 72rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #575757;
      }
      .goods-group-list {
        display: flex;
        flex-wrap: wrap;
        .goods-item {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 20rpx;
          .cat_name {
            color: #2e2e2e;
            font-size: 21rpx;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}
</style>